<template>
  <div class="box">
    <el-tooltip
      content="合并单元格"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="cellsMerge">
        <img src="@/assets/merge-cells.svg" />
      </div>
    </el-tooltip>

    <el-tooltip
      content="取消合并单元格"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="cellsUnmerge">
        <img src="@/assets/unmerge-cells.svg" />
      </div>
    </el-tooltip>

    <el-divider direction="vertical" />

    <el-tooltip
      content="居左"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="cellTextPlace('left')">
        <img src="@/assets/cell-text-left.svg" />
      </div>
    </el-tooltip>

    <el-tooltip
      content="居中"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="cellTextPlace('center')">
        <img src="@/assets/cell-text-center.svg" />
      </div>
    </el-tooltip>

    <el-tooltip
      content="居右"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="cellTextPlace('right')">
        <img src="@/assets/cell-text-right.svg" />
      </div>
    </el-tooltip>

    <el-divider direction="vertical" />

    <el-tooltip
      content="字体加粗"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="cellTextBold">
        <img src="@/assets/cell-text-bold.svg" />
      </div>
    </el-tooltip>

    <el-tooltip
      content="字体倾斜"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="cellTextTilt">
        <img src="@/assets/cell-text-tilt.svg" />
      </div>
    </el-tooltip>

    <el-tooltip
      content="字体下划线"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="cellTextUnderline">
        <img src="@/assets/cell-text-underline.svg" />
      </div>
    </el-tooltip>

    <el-divider direction="vertical" />

    <el-tooltip
      content="增大字号"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="fontSizeUpdate(+1)">
        <img src="@/assets/font-size-increase.svg" />
      </div>
    </el-tooltip>

    <el-tooltip
      content="减小字号"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="fontSizeUpdate(-1)">
        <img src="@/assets/font-size-reduce.svg" />
      </div>
    </el-tooltip>

    <el-divider direction="vertical" />

    <div class="tools" @click="cellTextColor">
      <span>文字颜色</span>
      <el-color-picker @change="cellTextColor" v-model="textColor" />
    </div>

    <div class="tools" @click="cellFillColor">
      <span>填充颜色</span>
      <el-color-picker @change="cellFillColor" v-model="fillColor" />
    </div>

    <el-divider direction="vertical" />

    <div class="tools" @click="cellBorderColor">
      <span>边框颜色</span>
      <el-color-picker @change="cellBorderColor" v-model="borderColor" />
    </div>

    <el-tooltip
      content="取消边框"
      trigger="hover"
      placement="bottom-start"
      :show-after="500"
    >
      <div class="icon tools" @click="cellTextNoborder">
        <img src="@/assets/cell-text-noborder.svg" />
      </div>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as Control from "@/libs/control";

const textColor = ref("#000");
const fillColor = ref("#fff");
const borderColor = ref("#000");

const cellsMerge = () => {
  Control.MergeCells();
};

const cellsUnmerge = () => {
  Control.UnmergeCells();
};

const cellTextPlace = (val) => {
  Control.TextPlace(val);
};

const cellTextBold = () => {
  Control.TextBold();
};

const cellTextTilt = () => {
  Control.TextTilt();
};

const cellTextUnderline = () => {
  Control.TextUnderline();
};

const fontSizeUpdate = (val) => {
  Control.FontSize(val);
};

const cellTextColor = () => {
  Control.TextColor(textColor.value);
};

const cellFillColor = () => {
  Control.FillColor(fillColor.value);
};

const cellBorderColor = () => {
  Control.BorderColor();
};

const cellTextNoborder = () => {
  Control.NoBorder();
};
</script>

<style lang="scss" scoped>
.box {
  padding-top: 8px;

  .icon {
    width: 25px;
    height: 25px;
  }

  .tools {
    float: left;
    margin-left: 8px;

    &:hover {
      background: #eee;
    }

    &:active {
      background: #ccc;
    }
  }

  :deep(.el-color-picker) {
    .el-color-picker__trigger {
      width: 25px;
      height: 25px;
      padding: 2px;
      border: none;
    }
  }

  .el-divider {
    float: left;
    margin: 0 0 0 8px;
    height: 25px;
  }
}
</style>
